<script setup lang="ts">
  import { ref, watch } from 'vue'
  const emits = defineEmits(['update:modelValue'])
 const props = defineProps({
   list:{
     type:Array,
     required:true
   },
   modelValue:{
     type:[String, Number],
     required:true,
     default:''
   },
   disabled: {
	   type: Boolean,
	   default: false,
   }
 })
 const switchValue = ref(props.modelValue.toString())
  const switchChange = (data:any) => {
	  if(props.disabled) {
		  return;
	  }
    switchValue.value = data.value.toString()
    emits('update:modelValue', data.value.toString())
  }

  watch(() => props.modelValue,(newVal) =>{
    switchValue.value = newVal.toString()
  })
</script>

<template>
  <view class="sign-switch">
    <view class="sign-switch-item" @click="switchChange(item)" v-for="(item,index) in list" :key="index" :class="{active: switchValue === item.value}">
      {{item.label}}
    </view>
  </view>
</template>

<style scoped lang="scss">
.sign-switch{
  display: inline-block;
  border-radius: 12rpx;
  overflow: hidden;
  .sign-switch-item{
    display: inline-block;
    background-color: #f8f8f8;
    font-size: 28rpx;
    color: #21252E;
    padding: 6rpx 28rpx;
    font-weight: 500;
    &.active{
      color: #FFFFFF;
      background: #1677FE;
    }
  }
}
</style>
